var ImageList = new Array()
$(function(){
    $('.label').val("-1").change()
    $('.label').change(submitagain)
    initUpload()
})

function initUpload(){
    console.log("绑定拖动事件")
    $(".uploadbox").on({
        "dragover": function(e){
            e.preventDefault()
            e.target.style.borderColor = "blue"
            e.target.style.borderWidth = "5px"
            console.log("文件进来了")
        },
        "dragleave": function(e){
            e.preventDefault()
            e.target.style.borderColor = "cadetblue"
            e.target.style.borderWidth = "medium"
        },
        "drop": function(e){
            e.preventDefault()
            e.stopPropagation()
            box = $("#upload")
            //image = $(".boximg")
            let file = e.originalEvent.dataTransfer.files;
            var reader = new FileReader();
            reader.onload = function(e){
                //image = reader.result
                html = "<div class=\"uploadbox\"><img class=\"boximg\"src=\""+reader.result+"\"></div>"
                box.before(html)
                var img = box.prev()
                //交给服务器推理
                var begin = Date.now()
                startloading()
                Url = '/api/infer'
                $.ajax({
                    ContentType: "application/json",
                    type: 'POST',
                    dataType: "json",
                    url: Url,
                    data:JSON.stringify({"task":"PDet","img_a":reader.result}),
                    success:function(res){
                        if (res!=null && res.code==200){
                            var end = Date.now()
                            mes = "成功收到结果，系统处理时间："+(res.time*1000).toFixed(0)+"ms; 系统响应时间:"+(end-begin)+"ms"
                            stoploading(mes)
                            //console.log(res.image)
                            img.attr("id",res.image)
                            img.on({"click":function(e){
                                id = $(e.target).parent()[0].id
                                changeImage(id)
                            }})
                            ImageList[res.image] = res.prod
                            $(".result").attr("src","data:image/png;base64,"+res.prod)
                            $(".result").attr("id",res.image)
                        }else{
                            mes = "系统出错："+res.err
                            stoploading(mes)
                        }
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest, textStatus, errorThrown)
                        mes = "系统出错"+errorThrown
                        stoploading(mes)
                    }
                })
            }
            e.target.style.borderColor = "cadetblue"
            e.target.style.borderWidth = "medium"
            reader.readAsDataURL(file[0])
        }
    })
}

function changeImage(image){
    prod = ImageList[image]
    $('.label').val("-1").change()
    $(".result").attr("src","data:image/png;base64,"+prod)
    $(".result").attr("id",image)
}

function submitagain(){
    var image_key = $(".result").attr("id")
    var index = $(".label").val()
    if (index=="-1"){
        return
    }
    if (image_key==null){
        alert("请先选一张图片进行推理")
    }else{
        startloading()
        var begin = Date.now()
        Url = '/api/postprocess'
        $.ajax({
            ContentType: "application/json",
            type: 'POST',
            dataType: "json",
            url: Url,
            data:JSON.stringify({"task":"PDet","image":image_key, "postfunc":"onlyshowOne", "param":index}),
            success:function(res){
                if (res.code==200){
                    var end = Date.now()
                    mes = "成功收到结果，系统处理时间："+(res.time*1000).toFixed(0)+"ms; 系统响应时间:"+(end-begin)+"ms"
                    stoploading(mes)
                    //ImageList[res.image] = res.prod
                    $(".result").attr("src","data:image/png;base64,"+res.prod)
                }else{
                    mes = "系统出错："+res.err
                    stoploading(mes)
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest, textStatus, errorThrown)
                mes = "系统出错"+errorThrown
                stoploading(mes)
            }
        })
    }
}